<template>
  <div style="display: flex;">
    <asideTabs :searchVocDetails="searchVocDetails" :vocId="vocId" :vocNext="vocNext" :path="path"></asideTabs>
    <div class="pill">
      <div class="g-main">
        <div class="pill-content">
          <div class="pill-title">
            <span style="color: rgba(0, 84, 190, 1);"><span v-html="formatting(vocNext)"></span>{{ searchVocDetails
              }}</span>制药行业信息
          </div>
          <div class="content" v-loading="loading" element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading" style="margin-bottom: 20px;">
            <div>
              <div class="title">有组织工艺排放</div>
              <div class="second-title">单位:(mg/m<sup>3</sup>)</div>
              <div class="table">
                <el-table :data="orgData" border stripe style="width: 100%" :header-cell-style="{
      background: '#eef1f6',
      color: 'black',
      padding: '6px',
    }" :cell-style="{ height: '35px', padding: '0' }">
                  <el-table-column prop="target" label="目标物" align="center">
                  </el-table-column>
                  <el-table-column prop="gasStation" label="废气处理设施（生物车间）" align="center">
                  </el-table-column>
                  <el-table-column prop="sewageStation" label="污水站" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div>
              <div class="title">无组织工艺排放</div>
              <div class="second-title">单位:(mg/m<sup>3</sup>)</div>
              <div class="table">
                <el-table :data="inorgData" border stripe style="width: 100%" :header-cell-style="{
      background: '#eef1f6',
      color: 'black',
      padding: '6px',
    }" :cell-style="{ height: '35px', padding: '0' }">
                  <el-table-column prop="target" label="目标物" align="center">
                  </el-table-column>
                  <el-table-column prop="materialStation" label="原料库" align="center">
                  </el-table-column>
                  <el-table-column prop="workshop" label="生产车间（生物车间）" align="center">
                  </el-table-column>
                  <el-table-column prop="liquidStation" label="危废间" align="center">
                  </el-table-column>
                  <el-table-column prop="factory" label="厂区内" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { getPillData } from "@/api/publicSearch";
import { formatting } from "@/api/formatVoc";
import asideTabs from "@/components/AsideTabs"
export default {
  name: "PillView",
  components: { asideTabs },
  data() {
    return {
      //有组织排放数据
      orgData: [],
      //无组织排放数据
      inorgData: [],
      //标题分子式
      searchVocDetails: "",
      vocId: "",
      vocNext: "",
      path: 'pill'
    };
  },
  mounted() {
    this.vocId = this.$route.query.vocId;
    this.searchVocDetails = this.$route.query.searchVocDetails;
    this.vocNext = this.$route.query.vocNext;
    this.loading = true;
    getPillData(this.vocId).then((res) => {
      this.orgData = res.data.data.pillOrganizedEmissionsList;
      this.inorgData = res.data.data.pillInorganizedEmissionsList;
      this.loading = false;
    });
  },
  methods: {
    //链接中跳转函数
    gotoNewpage(str, radio) {
      let path = str;
      //设置同一个大气和催化反应转换
      this.radio = radio;
      this.$router.push({
        path: path,
        query: {
          searchVocDetails: this.searchVocDetails,
          vocId: this.vocId,
          radio: this.radio,
          vocNext: this.vocNext,
        },
      });
    },
    //格式化处理
    formatting(str) {
      return formatting(str);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../css/common.scss";

.pill {
  width: 90%;

  // margin: 0 auto;
  .pill-content {
    margin-left: 0px;
  }

  // height: 100px;
  .pill-title {
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }

  .title {
    text-align: left;
    font-size: #{$second_font_size};
    font-weight: #{$second_font_weight};
    margin-top: #{$second_titile_top}px;
    margin-left: #{$second_titile_left}px;
    margin-bottom: #{$second_titile_bottom}px;
  }

  .second-title {
    text-align: left;
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
  }

  .table {
    text-align: left;
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
  }

  .el-button--medium {
    font-size: 18px;
  }

  .el-table__empty-block {
    max-height: 20px !important;
  }

  //相关链接
  .link-ul li {
    list-style-type: square;
    width: 90%;
    text-align: left;
    color: rgba(0, 84, 190, 1);
    font-size: #{$third_font_size};
    font-weight: #{$third_font_weight};
    margin-top: #{$third_titile_top}px;
    margin-left: #{$third_titile_left}px;
    margin-bottom: #{$third_titile_bottom}px;
    cursor: pointer;
  }

  .link-title {
    text-align: left;
    font-size: #{$first_font_size};
    font-weight: #{$first_font_weight};
    margin-top: #{$first_titile_top}px;
    margin-left: #{$first_titile_left}px;
    margin-bottom: #{$first_titile_bottom}px;
  }
}
</style>